{
 "metadata": {
  "name": "",
  "signature": "sha256:bf86b0b45f7b0de7f5e6e34b699abe694c92cd38f3ae094c4221400acef848b2"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "import random\n",
      "import bearcart\n",
      "import pandas as pd\n",
      "\n",
      "bearcart.initialize_notebook()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<script>\n",
        "  function bct_load_lib(url, callback){\n",
        "        if(typeof d3 !== 'undefined' && url === 'http://d3js.org/d3.v3.min.js'){\n",
        "          callback();\n",
        "          return null\n",
        "        } else if(typeof $ !== 'undefined' && url == 'http://code.jquery.com/jquery-1.9.1.js'){\n",
        "          callback();\n",
        "          return null\n",
        "        }\n",
        "        var s = document.createElement('script');\n",
        "        s.src = url;\n",
        "        s.async = true;\n",
        "        s.onreadystatechange = s.onload = callback;\n",
        "        s.onerror = function(){\n",
        "          console.warn(\"failed to load library \" + url);\n",
        "          };\n",
        "        document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
        "  }\n",
        "  var bearcart_event = new CustomEvent(\n",
        "    \"bearcart_libs_loaded\",\n",
        "    {bubbles: true, cancelable: true}\n",
        "  );\n",
        "\n",
        "  var load_charts = function(){\n",
        "    window.dispatchEvent(bearcart_event);\n",
        "  }\n",
        "\n",
        " function load_all_libs(){\n",
        "    console.log('Loading all Bearcart Libraries...')\n",
        "    bct_load_lib('http://d3js.org/d3.v3.min.js', function(){\n",
        "      bct_load_lib('http://code.jquery.com/jquery-1.9.1.js', function(){\n",
        "        bct_load_lib('http://code.jquery.com/ui/1.10.4/jquery-ui.js', function(){\n",
        "          bct_load_lib('http://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.min.js', load_charts)\n",
        "        })\n",
        "      })\n",
        "    })\n",
        "  }\n",
        "\n",
        " if(typeof define === \"function\" && define.amd){\n",
        "      if (window['d3'] === undefined){\n",
        "          require.config(\n",
        "              {paths: {d3: 'http://d3js.org/d3.v3.min'}\n",
        "              }\n",
        "            );\n",
        "          require([\"d3\"], function(d3){\n",
        "              console.log('Loading from require.js...')\n",
        "              window.d3 = d3;\n",
        "              load_all_libs();\n",
        "          });\n",
        "      };\n",
        " }else{\n",
        "      console.log('Require.js not found, loading manually...')\n",
        "      load_all_libs();\n",
        " };\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10de02350>"
       ]
      },
      {
       "html": [
        "<link rel=\"stylesheet\" href=\"http://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.css\">\n",
        "<link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">\n",
        "<style>\n",
        "  .rickshaw-chart {\n",
        "      font: 10px sans-serif;\n",
        "      float: left;\n",
        "      margin-top: 70px;\n",
        "            }\n",
        "  .rickshaw-y-axis {\n",
        "      font: 10px sans-serif;\n",
        "      float: left;\n",
        "      margin-top: 70px;\n",
        "  }\n",
        "  .rickshaw-legend {\n",
        "      float: left;\n",
        "      margin-left: 15px;\n",
        "      margin-top: 70px;\n",
        "  }\n",
        "\n",
        "  .rickshaw-slider {\n",
        "      float:left;\n",
        "      margin-top: : 100px;\n",
        "  }\n",
        "</style>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x10de026d0>"
       ]
      }
     ],
     "prompt_number": 11
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "tabular_data_1 = [random.randint(10, 100) for x in range(0, 25, 1)]\n",
      "tabular_data_2 = [random.randint(10, 100) for x in range(0, 25, 1)]\n",
      "tabular_data_3 = [random.randint(10, 100) for x in range(0, 25, 1)]\n",
      "df = pd.DataFrame({'Data 1': tabular_data_1, 'Data 2': tabular_data_2, \n",
      "                   'Data 3': tabular_data_3})\n",
      "\n",
      "vis = bearcart.Chart(df, x_time=False)\n",
      "vis"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<div class=\"rickshaw-y-axis\" id=\"bearcart_y_axis_id_0b1a46e23a1c4f39b9911dc18caf7f99\"></div>\n",
        "<div class=\"rickshaw-chart\" id=\"bearcart_4a48615fd82c4157bf6c507c1c397bf9\"></div>\n",
        "<div class=\"rickshaw-legend\" id=\"bearcart_legend_id_33d83b30cf624dfca290aef18cfcecd4\"></div>\n",
        "<div class=\"rickshaw-slider\" id=\"bearcart_slider_id_e0adb5dc7d0d428fa3687d397416bc4b\"></div>\n",
        "\n",
        "<script>\n",
        "\n",
        "  var json = JSON.parse('[{\"data\": [{\"y\": 52, \"x\": 0}, {\"y\": 56, \"x\": 1}, {\"y\": 79, \"x\": 2}, {\"y\": 11, \"x\": 3}, {\"y\": 55, \"x\": 4}, {\"y\": 48, \"x\": 5}, {\"y\": 22, \"x\": 6}, {\"y\": 16, \"x\": 7}, {\"y\": 19, \"x\": 8}, {\"y\": 100, \"x\": 9}, {\"y\": 60, \"x\": 10}, {\"y\": 65, \"x\": 11}, {\"y\": 78, \"x\": 12}, {\"y\": 54, \"x\": 13}, {\"y\": 51, \"x\": 14}, {\"y\": 52, \"x\": 15}, {\"y\": 88, \"x\": 16}, {\"y\": 96, \"x\": 17}, {\"y\": 68, \"x\": 18}, {\"y\": 70, \"x\": 19}, {\"y\": 19, \"x\": 20}, {\"y\": 98, \"x\": 21}, {\"y\": 16, \"x\": 22}, {\"y\": 81, \"x\": 23}, {\"y\": 17, \"x\": 24}], \"name\": \"Data 1\"}, {\"data\": [{\"y\": 48, \"x\": 0}, {\"y\": 96, \"x\": 1}, {\"y\": 50, \"x\": 2}, {\"y\": 89, \"x\": 3}, {\"y\": 21, \"x\": 4}, {\"y\": 57, \"x\": 5}, {\"y\": 39, \"x\": 6}, {\"y\": 42, \"x\": 7}, {\"y\": 24, \"x\": 8}, {\"y\": 59, \"x\": 9}, {\"y\": 53, \"x\": 10}, {\"y\": 52, \"x\": 11}, {\"y\": 13, \"x\": 12}, {\"y\": 70, \"x\": 13}, {\"y\": 100, \"x\": 14}, {\"y\": 63, \"x\": 15}, {\"y\": 16, \"x\": 16}, {\"y\": 36, \"x\": 17}, {\"y\": 92, \"x\": 18}, {\"y\": 60, \"x\": 19}, {\"y\": 37, \"x\": 20}, {\"y\": 39, \"x\": 21}, {\"y\": 28, \"x\": 22}, {\"y\": 36, \"x\": 23}, {\"y\": 42, \"x\": 24}], \"name\": \"Data 2\"}, {\"data\": [{\"y\": 53, \"x\": 0}, {\"y\": 11, \"x\": 1}, {\"y\": 100, \"x\": 2}, {\"y\": 18, \"x\": 3}, {\"y\": 73, \"x\": 4}, {\"y\": 89, \"x\": 5}, {\"y\": 14, \"x\": 6}, {\"y\": 70, \"x\": 7}, {\"y\": 86, \"x\": 8}, {\"y\": 69, \"x\": 9}, {\"y\": 96, \"x\": 10}, {\"y\": 74, \"x\": 11}, {\"y\": 37, \"x\": 12}, {\"y\": 77, \"x\": 13}, {\"y\": 84, \"x\": 14}, {\"y\": 30, \"x\": 15}, {\"y\": 59, \"x\": 16}, {\"y\": 18, \"x\": 17}, {\"y\": 37, \"x\": 18}, {\"y\": 58, \"x\": 19}, {\"y\": 12, \"x\": 20}, {\"y\": 62, \"x\": 21}, {\"y\": 55, \"x\": 22}, {\"y\": 92, \"x\": 23}, {\"y\": 63, \"x\": 24}], \"name\": \"Data 3\"}]');\n",
        "\n",
        "  var make_plot = function(){\n",
        "    if (typeof Rickshaw === 'undefined'){\n",
        "      window.addEventListener('bearcart_libs_loaded', make_plot)\n",
        "      return;\n",
        "    }\n",
        "\n",
        "    var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );\n",
        "\n",
        "    var graph = new Rickshaw.Graph( {\n",
        "                element: d3.select(\"#bearcart_4a48615fd82c4157bf6c507c1c397bf9\").node(),\n",
        "                min: 'auto',\n",
        "                width: 750,\n",
        "                height: 400,\n",
        "                renderer: 'line',\n",
        "                series: [\n",
        "                         {name: 'Data 1',\n",
        "                          color: palette.color(),\n",
        "                          data: json[0].data},\n",
        "                          \n",
        "                         {name: 'Data 2',\n",
        "                          color: palette.color(),\n",
        "                          data: json[1].data},\n",
        "                          \n",
        "                         {name: 'Data 3',\n",
        "                          color: palette.color(),\n",
        "                          data: json[2].data}\n",
        "                          ]\n",
        "                })\n",
        "\n",
        "    \n",
        "\n",
        "    var xAxis = new Rickshaw.Graph.Axis.X( {\n",
        "    graph: graph\n",
        "} );\n",
        "\n",
        "    var y_axis = new Rickshaw.Graph.Axis.Y( {\n",
        "        graph: graph,\n",
        "        orientation: 'left',\n",
        "        height: 400,\n",
        "        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,\n",
        "        element: d3.select(\"#bearcart_y_axis_id_0b1a46e23a1c4f39b9911dc18caf7f99\").node()\n",
        "} );\n",
        "\n",
        "    var hoverDetail = new Rickshaw.Graph.HoverDetail( {\n",
        "    graph: graph,\n",
        "    xFormatter: function(x){return Math.floor(x / 10) * 10}\n",
        "} );\n",
        "\n",
        "    var legend = new Rickshaw.Graph.Legend({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_legend_id_33d83b30cf624dfca290aef18cfcecd4\").node()\n",
        "\n",
        "});\n",
        "\n",
        "var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({\n",
        "    graph: graph,\n",
        "    legend: legend\n",
        "});\n",
        "\n",
        "    var slider = new Rickshaw.Graph.RangeSlider({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_slider_id_e0adb5dc7d0d428fa3687d397416bc4b\").node()\n",
        "});\n",
        "\n",
        "    graph.render();\n",
        "\n",
        "  };\n",
        "\n",
        "  make_plot();\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 12,
       "text": [
        "<bearcart.bearcart.Chart at 0x10de06950>"
       ]
      }
     ],
     "prompt_number": 12
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "vis2 = bearcart.Chart(df, x_time=False, plt_type='area')\n",
      "vis2"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<div class=\"rickshaw-y-axis\" id=\"bearcart_y_axis_id_ef212683d79842c39e8738874e00fe6d\"></div>\n",
        "<div class=\"rickshaw-chart\" id=\"bearcart_4fb59e3b33044355833c786585a13da0\"></div>\n",
        "<div class=\"rickshaw-legend\" id=\"bearcart_legend_id_9bce888439c940e68f2d75b9499f7d53\"></div>\n",
        "<div class=\"rickshaw-slider\" id=\"bearcart_slider_id_884025e7189c440489247b008716773e\"></div>\n",
        "\n",
        "<script>\n",
        "\n",
        "  var json = JSON.parse('[{\"data\": [{\"y\": 52, \"x\": 0}, {\"y\": 56, \"x\": 1}, {\"y\": 79, \"x\": 2}, {\"y\": 11, \"x\": 3}, {\"y\": 55, \"x\": 4}, {\"y\": 48, \"x\": 5}, {\"y\": 22, \"x\": 6}, {\"y\": 16, \"x\": 7}, {\"y\": 19, \"x\": 8}, {\"y\": 100, \"x\": 9}, {\"y\": 60, \"x\": 10}, {\"y\": 65, \"x\": 11}, {\"y\": 78, \"x\": 12}, {\"y\": 54, \"x\": 13}, {\"y\": 51, \"x\": 14}, {\"y\": 52, \"x\": 15}, {\"y\": 88, \"x\": 16}, {\"y\": 96, \"x\": 17}, {\"y\": 68, \"x\": 18}, {\"y\": 70, \"x\": 19}, {\"y\": 19, \"x\": 20}, {\"y\": 98, \"x\": 21}, {\"y\": 16, \"x\": 22}, {\"y\": 81, \"x\": 23}, {\"y\": 17, \"x\": 24}], \"name\": \"Data 1\"}, {\"data\": [{\"y\": 48, \"x\": 0}, {\"y\": 96, \"x\": 1}, {\"y\": 50, \"x\": 2}, {\"y\": 89, \"x\": 3}, {\"y\": 21, \"x\": 4}, {\"y\": 57, \"x\": 5}, {\"y\": 39, \"x\": 6}, {\"y\": 42, \"x\": 7}, {\"y\": 24, \"x\": 8}, {\"y\": 59, \"x\": 9}, {\"y\": 53, \"x\": 10}, {\"y\": 52, \"x\": 11}, {\"y\": 13, \"x\": 12}, {\"y\": 70, \"x\": 13}, {\"y\": 100, \"x\": 14}, {\"y\": 63, \"x\": 15}, {\"y\": 16, \"x\": 16}, {\"y\": 36, \"x\": 17}, {\"y\": 92, \"x\": 18}, {\"y\": 60, \"x\": 19}, {\"y\": 37, \"x\": 20}, {\"y\": 39, \"x\": 21}, {\"y\": 28, \"x\": 22}, {\"y\": 36, \"x\": 23}, {\"y\": 42, \"x\": 24}], \"name\": \"Data 2\"}, {\"data\": [{\"y\": 53, \"x\": 0}, {\"y\": 11, \"x\": 1}, {\"y\": 100, \"x\": 2}, {\"y\": 18, \"x\": 3}, {\"y\": 73, \"x\": 4}, {\"y\": 89, \"x\": 5}, {\"y\": 14, \"x\": 6}, {\"y\": 70, \"x\": 7}, {\"y\": 86, \"x\": 8}, {\"y\": 69, \"x\": 9}, {\"y\": 96, \"x\": 10}, {\"y\": 74, \"x\": 11}, {\"y\": 37, \"x\": 12}, {\"y\": 77, \"x\": 13}, {\"y\": 84, \"x\": 14}, {\"y\": 30, \"x\": 15}, {\"y\": 59, \"x\": 16}, {\"y\": 18, \"x\": 17}, {\"y\": 37, \"x\": 18}, {\"y\": 58, \"x\": 19}, {\"y\": 12, \"x\": 20}, {\"y\": 62, \"x\": 21}, {\"y\": 55, \"x\": 22}, {\"y\": 92, \"x\": 23}, {\"y\": 63, \"x\": 24}], \"name\": \"Data 3\"}]');\n",
        "\n",
        "  var make_plot = function(){\n",
        "    if (typeof Rickshaw === 'undefined'){\n",
        "      window.addEventListener('bearcart_libs_loaded', make_plot)\n",
        "      return;\n",
        "    }\n",
        "\n",
        "    var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );\n",
        "\n",
        "    var graph = new Rickshaw.Graph( {\n",
        "                element: d3.select(\"#bearcart_4fb59e3b33044355833c786585a13da0\").node(),\n",
        "                min: 'auto',\n",
        "                width: 750,\n",
        "                height: 400,\n",
        "                renderer: 'area',\n",
        "                series: [\n",
        "                         {name: 'Data 1',\n",
        "                          color: palette.color(),\n",
        "                          data: json[0].data},\n",
        "                          \n",
        "                         {name: 'Data 2',\n",
        "                          color: palette.color(),\n",
        "                          data: json[1].data},\n",
        "                          \n",
        "                         {name: 'Data 3',\n",
        "                          color: palette.color(),\n",
        "                          data: json[2].data}\n",
        "                          ]\n",
        "                })\n",
        "\n",
        "    \n",
        "\n",
        "    var xAxis = new Rickshaw.Graph.Axis.X( {\n",
        "    graph: graph\n",
        "} );\n",
        "\n",
        "    var y_axis = new Rickshaw.Graph.Axis.Y( {\n",
        "        graph: graph,\n",
        "        orientation: 'left',\n",
        "        height: 400,\n",
        "        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,\n",
        "        element: d3.select(\"#bearcart_y_axis_id_ef212683d79842c39e8738874e00fe6d\").node()\n",
        "} );\n",
        "\n",
        "    var hoverDetail = new Rickshaw.Graph.HoverDetail( {\n",
        "    graph: graph,\n",
        "    xFormatter: function(x){return Math.floor(x / 10) * 10}\n",
        "} );\n",
        "\n",
        "    var legend = new Rickshaw.Graph.Legend({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_legend_id_9bce888439c940e68f2d75b9499f7d53\").node()\n",
        "\n",
        "});\n",
        "\n",
        "var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({\n",
        "    graph: graph,\n",
        "    legend: legend\n",
        "});\n",
        "\n",
        "    var slider = new Rickshaw.Graph.RangeSlider({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_slider_id_884025e7189c440489247b008716773e\").node()\n",
        "});\n",
        "\n",
        "    graph.render();\n",
        "\n",
        "  };\n",
        "\n",
        "  make_plot();\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 13,
       "text": [
        "<bearcart.bearcart.Chart at 0x10de025d0>"
       ]
      }
     ],
     "prompt_number": 13
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "vis3 = bearcart.Chart(df, x_time=False, plt_type='bar')\n",
      "vis3"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<div class=\"rickshaw-y-axis\" id=\"bearcart_y_axis_id_f02b9641092f48adbc13b85cc8b408e8\"></div>\n",
        "<div class=\"rickshaw-chart\" id=\"bearcart_d69e769d0ed944f1bb3a630105725bea\"></div>\n",
        "<div class=\"rickshaw-legend\" id=\"bearcart_legend_id_ddf56b1229c54e77acb7b45f170517a0\"></div>\n",
        "<div class=\"rickshaw-slider\" id=\"bearcart_slider_id_cc1e3961cb8740ec98f77689e2765169\"></div>\n",
        "\n",
        "<script>\n",
        "\n",
        "  var json = JSON.parse('[{\"data\": [{\"y\": 52, \"x\": 0}, {\"y\": 56, \"x\": 1}, {\"y\": 79, \"x\": 2}, {\"y\": 11, \"x\": 3}, {\"y\": 55, \"x\": 4}, {\"y\": 48, \"x\": 5}, {\"y\": 22, \"x\": 6}, {\"y\": 16, \"x\": 7}, {\"y\": 19, \"x\": 8}, {\"y\": 100, \"x\": 9}, {\"y\": 60, \"x\": 10}, {\"y\": 65, \"x\": 11}, {\"y\": 78, \"x\": 12}, {\"y\": 54, \"x\": 13}, {\"y\": 51, \"x\": 14}, {\"y\": 52, \"x\": 15}, {\"y\": 88, \"x\": 16}, {\"y\": 96, \"x\": 17}, {\"y\": 68, \"x\": 18}, {\"y\": 70, \"x\": 19}, {\"y\": 19, \"x\": 20}, {\"y\": 98, \"x\": 21}, {\"y\": 16, \"x\": 22}, {\"y\": 81, \"x\": 23}, {\"y\": 17, \"x\": 24}], \"name\": \"Data 1\"}, {\"data\": [{\"y\": 48, \"x\": 0}, {\"y\": 96, \"x\": 1}, {\"y\": 50, \"x\": 2}, {\"y\": 89, \"x\": 3}, {\"y\": 21, \"x\": 4}, {\"y\": 57, \"x\": 5}, {\"y\": 39, \"x\": 6}, {\"y\": 42, \"x\": 7}, {\"y\": 24, \"x\": 8}, {\"y\": 59, \"x\": 9}, {\"y\": 53, \"x\": 10}, {\"y\": 52, \"x\": 11}, {\"y\": 13, \"x\": 12}, {\"y\": 70, \"x\": 13}, {\"y\": 100, \"x\": 14}, {\"y\": 63, \"x\": 15}, {\"y\": 16, \"x\": 16}, {\"y\": 36, \"x\": 17}, {\"y\": 92, \"x\": 18}, {\"y\": 60, \"x\": 19}, {\"y\": 37, \"x\": 20}, {\"y\": 39, \"x\": 21}, {\"y\": 28, \"x\": 22}, {\"y\": 36, \"x\": 23}, {\"y\": 42, \"x\": 24}], \"name\": \"Data 2\"}, {\"data\": [{\"y\": 53, \"x\": 0}, {\"y\": 11, \"x\": 1}, {\"y\": 100, \"x\": 2}, {\"y\": 18, \"x\": 3}, {\"y\": 73, \"x\": 4}, {\"y\": 89, \"x\": 5}, {\"y\": 14, \"x\": 6}, {\"y\": 70, \"x\": 7}, {\"y\": 86, \"x\": 8}, {\"y\": 69, \"x\": 9}, {\"y\": 96, \"x\": 10}, {\"y\": 74, \"x\": 11}, {\"y\": 37, \"x\": 12}, {\"y\": 77, \"x\": 13}, {\"y\": 84, \"x\": 14}, {\"y\": 30, \"x\": 15}, {\"y\": 59, \"x\": 16}, {\"y\": 18, \"x\": 17}, {\"y\": 37, \"x\": 18}, {\"y\": 58, \"x\": 19}, {\"y\": 12, \"x\": 20}, {\"y\": 62, \"x\": 21}, {\"y\": 55, \"x\": 22}, {\"y\": 92, \"x\": 23}, {\"y\": 63, \"x\": 24}], \"name\": \"Data 3\"}]');\n",
        "\n",
        "  var make_plot = function(){\n",
        "    if (typeof Rickshaw === 'undefined'){\n",
        "      window.addEventListener('bearcart_libs_loaded', make_plot)\n",
        "      return;\n",
        "    }\n",
        "\n",
        "    var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );\n",
        "\n",
        "    var graph = new Rickshaw.Graph( {\n",
        "                element: d3.select(\"#bearcart_d69e769d0ed944f1bb3a630105725bea\").node(),\n",
        "                min: 'auto',\n",
        "                width: 750,\n",
        "                height: 400,\n",
        "                renderer: 'bar',\n",
        "                series: [\n",
        "                         {name: 'Data 1',\n",
        "                          color: palette.color(),\n",
        "                          data: json[0].data},\n",
        "                          \n",
        "                         {name: 'Data 2',\n",
        "                          color: palette.color(),\n",
        "                          data: json[1].data},\n",
        "                          \n",
        "                         {name: 'Data 3',\n",
        "                          color: palette.color(),\n",
        "                          data: json[2].data}\n",
        "                          ]\n",
        "                })\n",
        "\n",
        "    \n",
        "\n",
        "    var xAxis = new Rickshaw.Graph.Axis.X( {\n",
        "    graph: graph\n",
        "} );\n",
        "\n",
        "    var y_axis = new Rickshaw.Graph.Axis.Y( {\n",
        "        graph: graph,\n",
        "        orientation: 'left',\n",
        "        height: 400,\n",
        "        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,\n",
        "        element: d3.select(\"#bearcart_y_axis_id_f02b9641092f48adbc13b85cc8b408e8\").node()\n",
        "} );\n",
        "\n",
        "    var hoverDetail = new Rickshaw.Graph.HoverDetail( {\n",
        "    graph: graph,\n",
        "    xFormatter: function(x){return Math.floor(x / 10) * 10}\n",
        "} );\n",
        "\n",
        "    var legend = new Rickshaw.Graph.Legend({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_legend_id_ddf56b1229c54e77acb7b45f170517a0\").node()\n",
        "\n",
        "});\n",
        "\n",
        "var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({\n",
        "    graph: graph,\n",
        "    legend: legend\n",
        "});\n",
        "\n",
        "    var slider = new Rickshaw.Graph.RangeSlider({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_slider_id_cc1e3961cb8740ec98f77689e2765169\").node()\n",
        "});\n",
        "\n",
        "    graph.render();\n",
        "\n",
        "  };\n",
        "\n",
        "  make_plot();\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 14,
       "text": [
        "<bearcart.bearcart.Chart at 0x10de02190>"
       ]
      }
     ],
     "prompt_number": 14
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "vis4 = bearcart.Chart(df, x_time=False, plt_type='scatterplot',\n",
      "                      colors={'Data 1': '#1d4e69',\n",
      "                              'Data 2': '#3b98ca',\n",
      "                              'Data 3': '#04090d' })\n",
      "vis4"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<div class=\"rickshaw-y-axis\" id=\"bearcart_y_axis_id_558b3cfc17a041ad82f91d6957cb2db8\"></div>\n",
        "<div class=\"rickshaw-chart\" id=\"bearcart_1ad491190a6b49139088dc032baf66bb\"></div>\n",
        "<div class=\"rickshaw-legend\" id=\"bearcart_legend_id_7b3ad9eed0e2470f85e9d48c8f77ae45\"></div>\n",
        "<div class=\"rickshaw-slider\" id=\"bearcart_slider_id_17b6359f9bb245818a437391079db2a9\"></div>\n",
        "\n",
        "<script>\n",
        "\n",
        "  var json = JSON.parse('[{\"data\": [{\"y\": 52, \"x\": 0}, {\"y\": 56, \"x\": 1}, {\"y\": 79, \"x\": 2}, {\"y\": 11, \"x\": 3}, {\"y\": 55, \"x\": 4}, {\"y\": 48, \"x\": 5}, {\"y\": 22, \"x\": 6}, {\"y\": 16, \"x\": 7}, {\"y\": 19, \"x\": 8}, {\"y\": 100, \"x\": 9}, {\"y\": 60, \"x\": 10}, {\"y\": 65, \"x\": 11}, {\"y\": 78, \"x\": 12}, {\"y\": 54, \"x\": 13}, {\"y\": 51, \"x\": 14}, {\"y\": 52, \"x\": 15}, {\"y\": 88, \"x\": 16}, {\"y\": 96, \"x\": 17}, {\"y\": 68, \"x\": 18}, {\"y\": 70, \"x\": 19}, {\"y\": 19, \"x\": 20}, {\"y\": 98, \"x\": 21}, {\"y\": 16, \"x\": 22}, {\"y\": 81, \"x\": 23}, {\"y\": 17, \"x\": 24}], \"name\": \"Data 1\"}, {\"data\": [{\"y\": 48, \"x\": 0}, {\"y\": 96, \"x\": 1}, {\"y\": 50, \"x\": 2}, {\"y\": 89, \"x\": 3}, {\"y\": 21, \"x\": 4}, {\"y\": 57, \"x\": 5}, {\"y\": 39, \"x\": 6}, {\"y\": 42, \"x\": 7}, {\"y\": 24, \"x\": 8}, {\"y\": 59, \"x\": 9}, {\"y\": 53, \"x\": 10}, {\"y\": 52, \"x\": 11}, {\"y\": 13, \"x\": 12}, {\"y\": 70, \"x\": 13}, {\"y\": 100, \"x\": 14}, {\"y\": 63, \"x\": 15}, {\"y\": 16, \"x\": 16}, {\"y\": 36, \"x\": 17}, {\"y\": 92, \"x\": 18}, {\"y\": 60, \"x\": 19}, {\"y\": 37, \"x\": 20}, {\"y\": 39, \"x\": 21}, {\"y\": 28, \"x\": 22}, {\"y\": 36, \"x\": 23}, {\"y\": 42, \"x\": 24}], \"name\": \"Data 2\"}, {\"data\": [{\"y\": 53, \"x\": 0}, {\"y\": 11, \"x\": 1}, {\"y\": 100, \"x\": 2}, {\"y\": 18, \"x\": 3}, {\"y\": 73, \"x\": 4}, {\"y\": 89, \"x\": 5}, {\"y\": 14, \"x\": 6}, {\"y\": 70, \"x\": 7}, {\"y\": 86, \"x\": 8}, {\"y\": 69, \"x\": 9}, {\"y\": 96, \"x\": 10}, {\"y\": 74, \"x\": 11}, {\"y\": 37, \"x\": 12}, {\"y\": 77, \"x\": 13}, {\"y\": 84, \"x\": 14}, {\"y\": 30, \"x\": 15}, {\"y\": 59, \"x\": 16}, {\"y\": 18, \"x\": 17}, {\"y\": 37, \"x\": 18}, {\"y\": 58, \"x\": 19}, {\"y\": 12, \"x\": 20}, {\"y\": 62, \"x\": 21}, {\"y\": 55, \"x\": 22}, {\"y\": 92, \"x\": 23}, {\"y\": 63, \"x\": 24}], \"name\": \"Data 3\"}]');\n",
        "\n",
        "  var make_plot = function(){\n",
        "    if (typeof Rickshaw === 'undefined'){\n",
        "      window.addEventListener('bearcart_libs_loaded', make_plot)\n",
        "      return;\n",
        "    }\n",
        "\n",
        "    \n",
        "\n",
        "    var graph = new Rickshaw.Graph( {\n",
        "                element: d3.select(\"#bearcart_1ad491190a6b49139088dc032baf66bb\").node(),\n",
        "                min: 'auto',\n",
        "                width: 750,\n",
        "                height: 400,\n",
        "                renderer: 'scatterplot',\n",
        "                series: [\n",
        "                         {name: 'Data 1',\n",
        "                          color: '#1d4e69',\n",
        "                          data: json[0].data},\n",
        "                          \n",
        "                         {name: 'Data 2',\n",
        "                          color: '#3b98ca',\n",
        "                          data: json[1].data},\n",
        "                          \n",
        "                         {name: 'Data 3',\n",
        "                          color: '#04090d',\n",
        "                          data: json[2].data}\n",
        "                          ]\n",
        "                })\n",
        "\n",
        "    \n",
        "\n",
        "    var xAxis = new Rickshaw.Graph.Axis.X( {\n",
        "    graph: graph\n",
        "} );\n",
        "\n",
        "    var y_axis = new Rickshaw.Graph.Axis.Y( {\n",
        "        graph: graph,\n",
        "        orientation: 'left',\n",
        "        height: 400,\n",
        "        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,\n",
        "        element: d3.select(\"#bearcart_y_axis_id_558b3cfc17a041ad82f91d6957cb2db8\").node()\n",
        "} );\n",
        "\n",
        "    var hoverDetail = new Rickshaw.Graph.HoverDetail( {\n",
        "    graph: graph,\n",
        "    xFormatter: function(x){return Math.floor(x / 10) * 10}\n",
        "} );\n",
        "\n",
        "    var legend = new Rickshaw.Graph.Legend({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_legend_id_7b3ad9eed0e2470f85e9d48c8f77ae45\").node()\n",
        "\n",
        "});\n",
        "\n",
        "var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({\n",
        "    graph: graph,\n",
        "    legend: legend\n",
        "});\n",
        "\n",
        "    var slider = new Rickshaw.Graph.RangeSlider({\n",
        "    graph: graph,\n",
        "    element: d3.select(\"#bearcart_slider_id_17b6359f9bb245818a437391079db2a9\").node()\n",
        "});\n",
        "\n",
        "    graph.render();\n",
        "\n",
        "  };\n",
        "\n",
        "  make_plot();\n",
        "\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 15,
       "text": [
        "<bearcart.bearcart.Chart at 0x10de029d0>"
       ]
      }
     ],
     "prompt_number": 15
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core.display import HTML\n",
      "styles = open(\"styles/custom.css\", \"r\").read()\n",
      "HTML(styles)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>\n",
        "<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>\n",
        "<style>\n",
        "\n",
        "  body {\n",
        "      font-family: 'Raleway', sans-serif;\n",
        "      color: #eff1f5;\n",
        "  }\n",
        "\n",
        "  /*Selectors*/\n",
        "\n",
        "  div.cell.selected {\n",
        "      border: none;\n",
        "  }\n",
        "\n",
        "  div.prompt {\n",
        "      display: none;\n",
        "  }\n",
        "\n",
        "  body {background-color:#2b303b;}\n",
        "\n",
        "  div#maintoolbar, div#header {display: none !important;}\n",
        "\n",
        "  div#notebook {border-top: none;}\n",
        "\n",
        "  div.input_area {\n",
        "    border-radius: 0px;\n",
        "    background-color: #2b303b;\n",
        "    border: none;\n",
        "  }\n",
        "\n",
        "  code, pre {\n",
        "    font-family: \"Source Code Pro\";\n",
        "  }\n",
        "\n",
        "  div.output_area pre {font-weight: normal; color: #c0c5ce;}\n",
        "\n",
        "  .rendered_html table, .rendered_html th, .rendered_html tr, .rendered_html td {\n",
        "    border: 1px  #4f5b66 solid;\n",
        "    white-space: nowrap;\n",
        "  }\n",
        "  .rendered_html thead {\n",
        "    background-color: #65737e;\n",
        "  }\n",
        "  .rendered_html th {font-weight: normal;}\n",
        "  table.dataframe tr {border: 1px #4f5b66;}\n",
        "\n",
        "  div.cell.selected {border-radius: 0px;}\n",
        "  div.text_cell_render, div.output_html {color: #eff1f5;}\n",
        "\n",
        "  .highlight .hll {background-color:#2b303b;}\n",
        "  .highlight  {background-color:#2b303b;\n",
        "               font-family: \"Source Code Pro\",;\n",
        "             }\n",
        "  .highlight .c { color: #ab7967; font-style: italic } /* Comment */\n",
        "  .highlight .err { border: 1px solid #FF0000 } /* Error */\n",
        "  .highlight .k { color: #bf616a;; } /* Keyword */\n",
        "  .highlight .o { color: #666666 } /* Operator */\n",
        "  .highlight .cm { color: #ab7967; font-style: italic } /* Comment.Multiline */\n",
        "  .highlight .cp { color: #BC7A00 } /* Comment.Preproc */\n",
        "  .highlight .c1 { color: #ab7967; font-style: italic } /* Comment.Single */\n",
        "  .highlight .cs { color: #ab7967; font-style: italic } /* Comment.Special */\n",
        "  .highlight .gd { color: #A00000 } /* Generic.Deleted */\n",
        "  .highlight .ge { font-style: italic } /* Generic.Emph */\n",
        "  .highlight .gr { color: #FF0000 } /* Generic.Error */\n",
        "  .highlight .gh { color: #000080; } /* Generic.Heading */\n",
        "  .highlight .gi { color: #00A000 } /* Generic.Inserted */\n",
        "  .highlight .go { color: #888888 } /* Generic.Output */\n",
        "  .highlight .gp { color: #000080; } /* Generic.Prompt */\n",
        "  .highlight .gu { color: #800080; } /* Generic.Subheading */\n",
        "  .highlight .gt { color: #0044DD } /* Generic.Traceback */\n",
        "  .highlight .kc { color: #bf616a; } /* Keyword.Constant */\n",
        "  .highlight .kd { color: #bf616a; } /* Keyword.Declaration */\n",
        "  .highlight .kn { color: #bf616a; font-weight: normal;} /* Keyword.Namespace */\n",
        "  .highlight .kp { color: #bf616a; } /* Keyword.Pseudo */\n",
        "  .highlight .kr { color: #bf616a; } /* Keyword.Reserved */\n",
        "  .highlight .kt { color: #bf616a; } /* Keyword.Type */\n",
        "  .highlight .p { color: #c0c5ce; } /* Brackets */\n",
        "  .highlight .o { color: #c0c5ce; } /* =, ., !, etc */\n",
        "  .highlight .n { color: #a3be8c; } /* Most text */\n",
        "  .highlight .m { color: #b48ead; } /* Literal.Number */\n",
        "  .highlight .s { color: #ebcb8b; } /* Literal.String */\n",
        "  .highlight .na { color: #a3be8c; } /* Name.Attribute */\n",
        "  .highlight .nb { color: #6a9fb5; } /* Name.Builtin */\n",
        "  .highlight .nc { color: #a3be8c; } /* Name.Class */\n",
        "  .highlight .no { color: #a3be8c;} /* Name.Constant */\n",
        "  .highlight .nd { color: #a3be8c; } /* Name.Decorator */\n",
        "  .highlight .ni { color: #a3be8c; } /* Name.Entity */\n",
        "  .highlight .ne { color: #a3be8c; } /* Name.Exception */\n",
        "  .highlight .nf { color: #d08770;} /* Name.Function */\n",
        "  .highlight .nl { color: #a3be8c; } /* Name.Label */\n",
        "  .highlight .nn { color: #a3be8c; font-weight: normal;} /* Name.Namespace */\n",
        "  .highlight .nt { color: #a3be8c; } /* Name.Tag */\n",
        "  .highlight .nv { color: #a3be8c; } /* Name.Variable */\n",
        "  .highlight .ow { color: #bf616a; } /* Operator.Word */\n",
        "  .highlight .w { color: #bbbbbb } /* Text.Whitespace */\n",
        "  .highlight .mf { color: #b48ead; } /* Literal.Number.Float */\n",
        "  .highlight .mh { color: #b48ead;} /* Literal.Number.Hex */\n",
        "  .highlight .mi { color: #b48ead; } /* Literal.Number.Integer */\n",
        "  .highlight .mo { color: #b48ead; } /* Literal.Number.Oct */\n",
        "  .highlight .sb { color: #ebcb8b; } /* Literal.String.Backtick */\n",
        "  .highlight .sc { color: #ebcb8b; } /* Literal.String.Char */\n",
        "  .highlight .sd { color: #ebcb8b; font-style: italic } /* Literal.String.Doc */\n",
        "  .highlight .s2 { color: #ebcb8b; } /* Literal.String.Double */\n",
        "  .highlight .se { color: #ebcb8b; } /* Literal.String.Escape */\n",
        "  .highlight .sh { color: #ebcb8b; } /* Literal.String.Heredoc */\n",
        "  .highlight .si { color: #ebcb8b; } /* Literal.String.Interpol */\n",
        "  .highlight .sx { color: #ebcb8b; } /* Literal.String.Other */\n",
        "  .highlight .sr { color: #ebcb8b; } /* Literal.String.Regex */\n",
        "  .highlight .s1 { color: #ebcb8b;} /* Literal.String.Single */\n",
        "  .highlight .ss { color: #ebcb8b; } /* Literal.String.Symbol */\n",
        "  .highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */\n",
        "  .highlight .vc { color: #bf616a; } /* Name.Variable.Class */\n",
        "  .highlight .vg { color: #19177C } /* Name.Variable.Global */\n",
        "  .highlight .vi { color: #19177C } /* Name.Variable.Instance */\n",
        "  .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */\n",
        "\n",
        "  .rickshaw_graph .y_ticks text {\n",
        "    fill: #d0d0d0 !important;\n",
        "    opacity: 1.0;\n",
        "  }\n",
        "\n",
        "  .rickshaw_graph .detail .x_label {\n",
        "    color: black;\n",
        "  }\n",
        "\n",
        "</style>\n"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 1,
       "text": [
        "<IPython.core.display.HTML at 0x1034b2a10>"
       ]
      }
     ],
     "prompt_number": 1
    }
   ],
   "metadata": {}
  }
 ]
}